<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LayUI</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body>
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="/2.7" class="layui-btn">一个可跳转的按钮</a>
    <button type="button" class="layui-btn layui-btn-primary" lay-on="confirm" data-name="abc" data-id="2">Confirm</button>

    <form action="#" method="get" name="myForm">
        <input type="text" name="username" >
        <button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">提交</button>
    </form>
<script>
    layui.use('layer', function(){
        var layer = layui.layer;
        var util = layui.util;
        // 批量事件
        util.on('lay-on', {
            "test-confirm": function(){
                var index = layer.confirm('一个询问框的示例？', {icon: 3}, function(){
                    // layer.msg('点击确定的回调', {icon: 1});
                    // js 提交表单
                    myForm.submit();
                    // layer.close(index);
                    layer.closeAll();
                }, function(){
                    layer.msg('点击取消的回调');
                });
            },
            confirm: function(){
                console.log(this);// 触发事件的对象，一般为 button
                // js 取 data-* 属性
                console.log(this.dataset);
                console.log(this.dataset.name);
                console.log(this.dataset.id);
                layer.confirm('一个询问框的示例？', {
                    btn: ['确定', '关闭'] //按钮
                }, function(){
                    layer.msg('确定', {icon: 1});
                }, function(){
                    layer.msg('取消', {
                        time: 3000, // 3s 后自动关闭
                    });
                });
            }
        });
    });
</script>
</body>
</html>